<template>
  <div class="form-view">
    <el-form
      ref="formRef"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="名称" prop="user">
        <el-input
          v-model="formInline.user"
          placeholder="请输入名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="类型" prop="region">
        <el-select
          v-model="formInline.region"
          placeholder="请选择类型"
          clearable
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期" prop="date">
        <el-date-picker
          v-model="formInline.date"
          type="date"
          placeholder="请选择日期"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button type="primary" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { FormInstance } from "element-plus";
import { reactive, ref } from "vue";
import { defineEmits } from "vue";

const formRef = ref<FormInstance>();

const emit = defineEmits(["formView"]);

const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

const onSubmit = () => {
  emit("formView", formInline);
};

const resetForm = () => {

  formRef.value!.resetFields();
  console.log("resetForm");
};
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
